<template>
  <div class="app">
    <div class="rightCon">
      <div class="title">Quiz navigation</div>
      <div class="right">
        <NavQuit
          v-for="item in quesList"
          :key="item.id"
          :index="item.id"
        ></NavQuit>
      </div>
    </div>
    <el-form label-width="80px">
      <div class="section">
        Section A: Multiple Choice—circle the best answer (2 marks each)
        <div class="left">Information</div>
      </div>
      <!-- 单选 -->
      <el-form-item v-for="item in quesList.slice(0, 5)" :key="item.id">
        <RadioSelect
          :title="item.title"
          :isSubmit="isSubmit"
          :aOption="item.a"
          :bOption="item.b"
          :cOption="item.c"
          :dOption="item.d"
          :index="item.id"
          :answer="item.answer"
        ></RadioSelect>
      </el-form-item>
      <!-- 多选 -->
      <el-form-item v-for="item in quesList.slice(5, 10)" :key="item.id">
        <CheckBox
          :isSubmit="isSubmit"
          :title="多选框"
          :index="item.id"
          :answer="item.answer"
          :aOption="item.a"
          :bOption="item.b"
          :cOption="item.c"
          :dOption="item.d"
        ></CheckBox>
      </el-form-item>
      <div class="section">
        Section B: Evaluate Code—What is the output message of the follow code
        fragments? (3 marks each)
        <div class="left">Information</div>
      </div>
      <!-- 判断 -->
      <el-form-item v-for="item in quesList.slice(10, 15)" :key="item.id">
        <isTrue
          :isSubmit="isSubmit"
          :title="item.title"
          :index="item.id"
          :answer="item.answer"
        ></isTrue>
      </el-form-item>
      <!-- 填空 -->
      <el-form-item v-for="item in quesList.slice(15)" :key="item.id">
        <GapFill
          :isSubmit="isSubmit"
          :title="item.title"
          :index="item.id"
          :answer="item.answer"
        ></GapFill>
      </el-form-item>
    </el-form>
    <el-button class="submit" type="primary" v-if="!isSubmit" @click="onSubmit"
      >提交</el-button
    >
    <el-button class="submit" type="primary" v-else @click="onReview"
      >review</el-button
    >
  </div>
</template>
<script>
import RadioSelect from "../components/radioSelect.vue";
import GapFill from "../components/gapFill.vue";
import NavQuit from "../components/navQuit.vue";
import CheckBox from "../components/checkBox.vue";
import IsTrue from "../components/isTrue.vue";

// import * as api from "./api";
import ques from "../mock/ques.json";
import moment from "moment";
import {throttle} from "lodash";
export default {
  name: "MyHome",
  components: {
    RadioSelect,
    GapFill,
    NavQuit,
    CheckBox,
    IsTrue,
  },
  data() {
    return {
      quesList: ques,
      isSubmit: false,
      chaTime: 0,
      startTime: 0,
    };
  },
  mounted() {
    window.addEventListener("scroll",throttle(this.onScroll,10000));
    window.addEventListener("mousemove",throttle(this.move,10000));

    this.startTime = moment().format("YYYY-MM-DD HH:mm:ss");
    console.log("小明", this.startTime, "开始答题");
    const userInfo = {
      userName: "小明",
    };
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
    this.$store.commit("TIME", moment().format("YYYY-MM-DD HH:mm:ss"));
    this.$store.commit("METHODS", "开始答题！");
  },
  methods: {
    onScroll() {
            const path = window.location.href.split("#")[1];
      if (path === "/review") {
        return;
      }
this.$store.commit("TIME", moment().format("YYYY-MM-DD HH:mm:ss"));
      this.$store.commit("METHODS", "滚动事件");
    },
    move(e){
      const path = window.location.href.split("#")[1]
      if (path === "/review") {
        return;
      }
this.$store.commit("TIME", moment().format("YYYY-MM-DD HH:mm:ss"));
      this.$store.commit("METHODS", "鼠标移动");

console.log(e.clientX,'x================');
console.log(e.clientY,'Y================');
      },
    onSubmit() {
      const endTime = moment().format("YYYY-MM-DD HH:mm:ss");
      const chaTime = moment(endTime).diff(moment(this.startTime), "seconds");
      console.log(this.startTime, "star==");
      console.log(chaTime, "cha=============");
      window.chaTime = chaTime;

      // const userInfo =JSON.parse(localStorage.getItem("userInfo"));
      console.log("小明", moment().format("YYYY-MM-DD HH:mm:ss"), "完成提交！");
      this.$store.commit("METHODS", "完成提交！");
      this.$store.commit("TIME", moment().format("YYYY-MM-DD HH:mm:ss"));
      this.isSubmit = true;
    },
    onReview() {
      this.$router.push("/review");
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  position: relative;
  .rightCon {
    position: absolute;
    z-index: 1000;
    border: 1px black solid;
    right: 50px;
    width: 325px;
    height: 230px;
    padding: 16px;
    .title {
      font-size: 16px;
      font-weight: bolder;
      margin-bottom: 10px;
    }
    .right {
      display: flex;
      flex-wrap: wrap;
    }
  }
  .section {
    margin-left: 177px;
    border: 1px solid black;
    width: 867px;
    background-color: #bee5eb;
    text-align: left;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: bolder;
    position: relative;
    // margin-left: 421px;
    .left {
      position: absolute;
      left: -100px;
      width: 75px;
      font-weight: normal;
      font-size: 16px;
      top: 0;
      background-color: #f8f9fa;
      border: 1px solid #cad0d7;
      padding: 8px;
    }
  }
  .submit {
    margin-left: 40%;
  }
}
</style>
